<template>
  <div>
    <el-dialog width="600px" title="加油确认" :close-on-click-modal="false" :visible.sync="isShowOilConfirm" center @closed="isShowOilConfirm = false">
      <el-form :model="formConfirm" :rules="rules" ref="formConfirm">
        <el-form-item label="订单号：" prop="userName" :label-width="formLabelWidth">{{form.orderNo}}</el-form-item>
        <el-form-item label="预约时间：" :label-width="formLabelWidth">{{form.deliveryDt}}</el-form-item>
        <el-form-item label="预约电话：" :label-width="formLabelWidth">{{ form.customerPhone | hidePhoneFourRank }} </el-form-item>
        <el-form-item label="预约数量：" :label-width="formLabelWidth">{{form.ton || 0}}吨</el-form-item>
        <el-form-item label="实际加油数量：" :label-width="formLabelWidth" prop="ton">
          <el-input-number controls-position="right" v-model="formConfirm.ton" :precision="2" size="medium" placeholder="请输入实际加油数量" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="加油枪号：" :label-width="formLabelWidth" prop="gunNo">
          <el-radio-group v-model="formConfirm.gunNo">
            <el-radio v-for="item in gunOptions" :label="item.gunNo" :key="item.gunNo"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="加油金额：" :label-width="formLabelWidth">{{price || 0}}元</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="close" @click="isShowOilConfirm = false" size="medium">关 闭</el-button>
        <el-button class="search-btn" type="primary" :loading="loading" @click="submit('formConfirm')" size="medium">确认完成加油</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { gunListByGasId, reservationOrderDeliver } from '@/api/order'
export default {
  data () {
    return {
      formLabelWidth: '130px',
      isShowOilConfirm: false,
      gunOptions:[],
      form: {},
      formConfirm: {
        ton: '',
        gunNo: ''
      },
      rules: {
        ton: [{ required: true, message: '加油数量不能不能为空！', trigger: 'change' }],
        gunNo: [{ required: true, message: '请选择枪号！', trigger: 'change' }],
      },
      loading: false
    }
  },
  computed: {
    price () {
      return (this.form.gunPrice * (this.formConfirm.ton || 0)).toFixed(2)
    }
  },
  methods: {
    // if(value.length>11)value=value.slice(0,11)
    init (params) {
      this.isShowOilConfirm = true
      const { gasId, orderNo, deliveryDt, customerPhone, ton, gunPrice, oilNo } = params
      this.form = { gasId, orderNo, deliveryDt, customerPhone, ton, gunPrice }
      // 预约数量默认选上，枪号默认清空
      this.formConfirm.ton = ton
      this.formConfirm.gunNo = ''
      this.$nextTick(()=>{
        this.$refs['formConfirm'].clearValidate(['gunNo']); 
      })
      this.gunListByGasIdApi(gasId, oilNo)
    },
    // 提交
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        this.formConfirm.orderNo = this.form.orderNo
        this.reservationOrderDeliverApi(this.formConfirm)
      })
    },
    // 提交接口
    async reservationOrderDeliverApi (params) {
      this.loading = true
      try {
        const { code } = await reservationOrderDeliver(params)
        if (code !== 200) return
        this.$message.success('加油订单已确认，请提醒用户支付！')
        this.$emit('handleBtn')
      } catch (e) {
        console.log(e)
      } finally {
        this.isShowOilConfirm = false
        this.loading = false
      }
    },
    //  油枪接口
    async gunListByGasIdApi (gasId, oilNo) {
      try {
        const { code, result } = await gunListByGasId({ gasId, oilNo })
        if (code !== 200) return
        this.gunOptions = result
      } catch (e) {
        console.log(e)
      }
    },
  }
}
</script>
<style lang="less" scoped>
.search-btn{
  background: #3669EB;
}
.close{
  background: #eeeeee;
}
</style>